<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<div class="dflex_vertical_c margin_b_20 table-head">
				<div class="dflex_vertical_c">
					<div class="search_name">商品名称：</div>
					<el-input v-model="req.name" placeholder="请输入" class="search_input" @change="search" clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_l_10">
					<div class="search_name">浏览时间：</div>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						align="right"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						:picker-options="pickerTimeOptions"
						class="search_start_end_time"
						@change="search"
					></el-date-picker>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索</el-button>
			</div>
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row @sort-change="sortable">
				<el-table-column label="商品" align="center">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<use-carousel :width="84" :height="84" :imgs="scope.row.goods.imgs" :video="scope.row.goods.video"></use-carousel>
							<div class="left_just margin_l_10">
								<el-popover
									popper-class="use_popover"
									:open-delay="200"
									:close-delay="40"
									placement="right"
									:title="scope.row.goods.name"
									trigger="hover"
									:content="scope.row.goods.name_pw || '--'"
								>
									<div slot="reference" class="dflex_d_c">
										<div class="ellipsis crpr">{{ scope.row.goods.name }}</div>
										<div class="ellipsis crpr">{{ scope.row.goods.name_pw || '--' }}</div>
									</div>
								</el-popover>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="价格" align="center">
					<template slot-scope="scope">
						<div class="price">{{ scope.row.goods.price / 100 }}</div>
						<div class="m_price">{{ scope.row.goods.market_price / 100 }}</div>
					</template>
				</el-table-column>
				<el-table-column property="visit_cnt" label="访问数" align="center"></el-table-column>
				<el-table-column property="last_modify_time" sortable="custom" label="浏览时间" align="center"></el-table-column>
				<div slot="empty"><el-empty description=" "></el-empty></div>
			</el-table>
			<el-pagination
				background
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
const __name = 'wmzmall-goods-history, wmzmall-goods';
export default {
	data() {
		return {
			dataId: '',
			searchTime: [],
			req: {
				page: 1,
				rows: 10,
				orderby: 'last_modify_time desc',
				name: '',
				begin_time: '',
				end_time: ''
			},
			tblHeight: 0,
			tableLoading: false,
			tableDatas: [],
			tableTotal: 0,
			pickerTimeOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			},
			searchBtnLoading: false
		};
	},
	methods: {
		async loadData(callback) {
			this.tableLoading = true;

			this.req.begin_time = '';
			this.req.end_time = '';

			if (this.searchTime && this.searchTime.length > 0) {
				this.req.begin_time = this.searchTime[0].getTime();
				this.req.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
			}

			this.$db[__name]
				.noaction()
				.noshopid()
				.where({ create_uid: this.dataId })
				.whereif(this.req.name, { 'goods.name': new RegExp(this.$api.filterRegexpKey(this.req.name), 'i') })
				.whereif(this.searchTime && this.searchTime.length > 0, { last_modify_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req.end_time)) })
				.field('visit_cnt, last_modify_time, goods.name, goods.name_pw, goods.imgs, goods.video, goods.price, goods.market_price')
				.totable(this.req)
				.then(res => {
					if (res.code == 200) {
						res.datas.rows.forEach(x => {
							x.goods = x.goods[0] || {};
							x.last_modify_time = new Date(x.last_modify_time).format();
						});
						this.tableDatas = res.datas.rows;
						this.tableTotal = res.datas.total;

						if (typeof callback === 'function') {
							callback();
						}
					}
					this.searchBtnLoading = false;
					this.tableLoading = false;
				});
		},
		search() {
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path + '-footprint');
			this.searchBtnLoading = true;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});

			uni.setStorage({
				key: '__search' + this.$route.path + '-footprint',
				data: this.req
			});
		},
		sortable(column) {
			if (column.order) {
				column.order = column.order.replace('ending', '');
			}

			this.req.orderby = column.prop + ' ' + (column.order || 'desc');

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		sizeChange(size) {
			this.$api.storagePaginationRows(size, this.$route.path + '-footprint');
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path + '-footprint');
			this.req.rows = size;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		currentChange(current) {
			this.$api.storagePaginationPage(current, this.$route.path + '-footprint');
			this.req.page = current;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		}
	},
	created() {
		let __search = uni.getStorageSync('__search' + this.$route.path + '-footprint');
		if (__search) {
			this.req = __search;
			if (this.req.begin_time && this.req.end_time) {
				this.searchTime.push(new Date(this.req.begin_time), new Date(this.req.end_time));
			}
		}

		this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path + '-footprint') || 1;
		this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path + '-footprint') || 10;

		this.dataId = this.$route.query.id || '';
		this.loadData(() => {
			this.$nextTick(() => {
				this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-footprint');
			});
		});
	},
	mounted() {
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-footprint');
		});
	},
	updated() {
		if (!this.tblHeight) {
			this.tblHeight = this.$refs.tbl.tblHeight;
		}
	}
};
</script>

<style></style>
